<div class="bg-light-grey padding margin-bottom">
    <h4 class="clearfix">
        <i class="mdi mdi-security"></i>
        OAuth2
        <button
                ng-click="createOAuth2()"
                class="btn btn-primary btn-sm pull-right">
            <i class="mdi mdi-plus"></i>
            create credentials
        </button>
    </h4>
    <p class="help-block" ng-if="!oauth2_credentials || !oauth2_credentials.data.length">
        You have not created any OAuth2 credentials for this consumer yet
    </p>
</div>

<div class="table-responsive" ng-if="oauth2_credentials && oauth2_credentials.data.length">
    <table class="table table-hover table-striped table-condensed">
        <tr>
            <th></th>
            <td width="1">#</td>
            <th>name</th>
            <th>client id</th>
            <th>redirect uris</th>
            <th>created</th>
            <th></th>
        </tr>
        <tr data-ng-repeat="cred in oauth2_credentials.data | orderBy : created_at : true">
            <td width="1"><raw-view data-item="cred"></raw-view></td>
            <td width="1">{{$index+1}}.</td>
            <th>{{cred.name}}</th>
            <th>{{cred.client_id}}</th>
            <th>
                <span class="badge badge-tag" ng-repeat="uri in cred.redirect_uris">
                    {{uri}}
                </span>
            </th>
            <td width="1" class="no-wrap">{{cred.created_at * 1000 | date : format : timezone}}</td>
            <td width="1">
                <button type="button" ng-click="deleteOAuth2($index,cred)" class="btn btn-danger btn-link">
                    <i class="mdi mdi-delete"></i>
                    Delete
                </button>
            </td>
        </tr>
    </table>
</div>